<template>
    <Modal @on-ok="choose" class="set-roles"
            title="设置角色"
            ok-text="保存"
            width="500"
            v-model="show"
            :mask-closable="false"
            :transfer="false">
        <div><span style="color: red">您正在关联角色的员工：</span><span style="color:red;">{{selectedEmployee.employeeName}}</span></div>
        <div  style="margin-top: 10px;max-height: 600px;overflow-y: scroll">
            <Tree  ref="rolesTree" :data="trees" show-checkbox></Tree>
        </div>
    </Modal>
</template>

<script>
    import * as rolesOpr from '../../http/role.api'
    import * as orgStructOpr from '../../http/orgStruct.api'
    export default {
        props: [],
        name: "SetRoles",
        data() {
            return {
                rolesTree: [],
                trees:[]
            }
        },
        watch: {
            show: function (newVal, oldVal) { // 控制当前模块是否显示
                if (newVal) {
                    this.getRolesList(); // 初始化组织架构树
                }
            },
            selectedEmployee: function (newVal, oldVal) { // 控制当前模块是否显示
            },
        },
        computed: {
            show: {
                get() {
                    return this.$store.state.employee.showRolesModal;
                },
                set(value) {
                    this.$store.commit('employee/toggleRelativeRolesModal', value)
                }
            },
            selectedEmployee: function () {
                return this.$store.state.employee.selectedEmployee&&this.$store.state.employee.selectedEmployee[0]||{};
            }
        },
        mounted() {
        },
        created() {
            // console.log('created');
        },
        methods: {
            choose() { // 模态框确定
                const _this  = this;
                const nodes = _this.$refs.rolesTree.getCheckedNodes().filter(item => !item.origin.roles);
                _this.$emit('rolesSelected', nodes);
            },
            getRolesList() { // 获取所有组织架构权限列表
                const _this = this;
                rolesOpr.getRolesByOrgStruct({search:{}}).then(function (res) {
                    const OrgPermission = res.data&&res.data.result|| {}
                    Promise.all(Object.keys(OrgPermission).map(id => orgStructOpr.getOrgStructDetail(id))).then(function (allRes) {
                        _this.trees = allRes.map(res => ({ orgInfo: res.data.result, roles: OrgPermission[res.data.result.id] }))
                            .map(item => buildTree(item))
                    }).catch(function (err) {
                        console.log(err);
                    })
                    function buildTree(item) {
                        let obj = {
                            title: item.orgInfo.dept,
                            expand: true,
                            origin: item,
                            children: item.roles.map(role => ({title: role.roleName, origin: role, checked: _this.selectedEmployee&&_this.selectedEmployee.roles&&_this.selectedEmployee.roles.find(role2 => role2.id===role.id)||false}))
                        };
                        return obj;
                    }
                }).catch(function (err) {
                    console.log(err);
                });
            },
        }
     }
</script>

<style scoped>

</style>
